<div class="da-list-wrap">
  <div class="da-content-banner">
    <d-breadcrumb>
      <d-breadcrumb-item><a routerLink="/">{{ 'basicdata.breadcrumb.home' | translate }}</a></d-breadcrumb-item>
      <d-breadcrumb-item><a routerLink="/pages/process/process-item">{{ 'process.breadcrumb.processItem' | translate
          }}</a></d-breadcrumb-item>
      <d-breadcrumb-item>{{ 'process.breadcrumb.addProcess' | translate }}</d-breadcrumb-item>
    </d-breadcrumb>
  </div>
  <div class="da-content-wrapper">
    <div class="card">
      <div class="card-title">
        <span>新增工序</span>
      </div>
      <form dForm [layout]="layoutDirection" [labelSize]="'sm'" [labelAlign]="'end'" class="mt-3" (dSubmit)="submit()">
        <section class="">
          <d-tabs [type]="'tabs'" [(activeTab)]="tabActiveId">
            <d-tab id="基本信息" title="基本信息">
              <div class="u-1-2">
                <d-form-item>
                  <d-form-label><span class="Required">*</span>工序编码</d-form-label>
                  <d-form-control>
                    <input dTextInput type="text" name="processNum" [(ngModel)]="Process.processNum"
                      [dValidateRules]="ProcessRules.processNum">
                  </d-form-control>
                </d-form-item>
              </div>
              <div class="u-1-2">
                <d-form-item>
                  <d-form-label><span class="Required">*</span>工序名称</d-form-label>
                  <d-form-control>
                    <input dTextInput type="text" name="processName" [(ngModel)]="Process.processName"
                      [dValidateRules]="ProcessRules.processName">
                  </d-form-control>
                </d-form-item>
              </div>
              <div class="u-1-1">
                <d-form-item>
                  <d-form-label>
                    <span class="label">工序附件</span>
                  </d-form-label>
                  <d-form-control>
                    <d-button bsStyle="common" (btnClick)="onButtonClick()"><i
                        class="icon icon-upload me-2"></i><span>附件</span></d-button>
                  </d-form-control>
                </d-form-item>
              </div>
              <div class="u-1-1">
                <d-form-item>
                  <d-form-label>备注</d-form-label>
                  <d-form-control>
                    <textarea dTextarea name="processNote" [(ngModel)]="Process.processNote"></textarea>
                  </d-form-control>
                </d-form-item>
              </div>
            </d-tab>
            <d-tab id="关联人员" title="关联人员">
              <d-data-table [dataSource]="tableData" [tableOverflowType]="'overlay'" [scrollable]="true"
                [tableWidthConfig]="tableWidthConfig">
                <thead dTableHead>
                  <tr dTableRow>
                    <th dHeadCell>&nbsp; </th>
                    <th dHeadCell>员工编码</th>
                    <th dHeadCell>员工名称</th>
                    <th dHeadCell>手机号</th>
                    <th dHeadCell>部门</th>
                  </tr>
                </thead>
                <tbody dTableBody>
                  <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex">
                    <tr dTableRow>
                      <td dTableCell>
                        <span (click)="add()"><i class="icon-code-editor-add add"></i></span>
                        <span class="ms-3" (click)="remove(rowIndex)"><i class="icon-code-editor-less minus"
                            style="font-size: 16px;"></i></span>
                      </td>
                      <td dTableCell *ngIf="!rowItem.employeeCode">
                        <input type="text" dTextInput style="width: 80%;" (click)="selectUser(rowIndex)">
                      </td>
                      <td dTableCell *ngIf="rowItem.employeeCode">
                        <span dTooltip [content]="rowItem.employeeCode">{{rowItem.employeeCode}}</span>
                      </td>
                      <td dTableCell>
                        <span dTooltip [content]="rowItem.name">{{rowItem.name}}</span>
                      </td>
                      <td dTableCell>
                        <span dTooltip [content]="rowItem.ownerPhoneNumber">{{rowItem.ownerPhoneNumber}}</span>
                      </td>
                      <td dTableCell>
                        <span dTooltip [content]="rowItem.departmentName">{{rowItem.departmentName}}</span>
                      </td>
                    </tr>
                  </ng-template>
              </d-data-table>
            </d-tab>
            <d-tab id="关联设备" title="关联设备">
              <d-data-table [dataSource]="deviceData" [tableOverflowType]="'overlay'" [scrollable]="true"
                [tableWidthConfig]="devuiTableWidthConfig">
                <thead dTableHead>
                  <tr dTableRow>
                    <th dHeadCell>&nbsp; </th>
                    <th dHeadCell>设备编码</th>
                    <th dHeadCell>设备名称</th>
                  </tr>
                </thead>
                <tbody dTableBody>
                  <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex">
                    <tr dTableRow>
                      <td dTableCell>
                        <span (click)="addDevice()"><i class="icon-code-editor-add add"></i></span>
                        <span class="ms-3" (click)="removeDevice(rowIndex)"><i class="icon-code-editor-less minus"
                            style="font-size: 16px;"></i></span>
                      </td>
                      <td dTableCell *ngIf="!rowItem.equipmentNum">
                        <input type="text" dTextInput style="width: 80%;" (click)="selectDevice(rowIndex)">
                      </td>
                      <td dTableCell *ngIf="rowItem.equipmentNum">
                        <span dTooltip [content]="rowItem.equipmentNum">{{rowItem.equipmentNum}}</span>
                      </td>
                      <td dTableCell>
                        <span dTooltip [content]="rowItem.equipmentName">{{rowItem.equipmentName}}</span>
                      </td>
                    </tr>
                  </ng-template>

              </d-data-table>


            </d-tab>
          </d-tabs>
        </section>
        <d-form-operation>
          <d-button bsStyle="primary" dFormSubmit>确定</d-button>
          <d-button class="ms-3" bsStyle="common" (click)=" cancle()">取消</d-button>
        </d-form-operation>
      </form>
    </div>

  </div>
</div>
<d-toast [value]="msgs" [life]="2000" [styleClass]="'custom-class'" [style]="{ left: '50%',top:'10px' }"></d-toast>
